<template>
  <div class="widget-cate">{{ title }}</div>
  <ul
    item-key="type"
    ghostClass="ghost"
    :group="{ name: 'people', pull: 'clone', put: false }"
    :sort="false"
    :list="list"
  >
    <li
      v-for="(element, index) in list"
      :key="index"
      draggable="true"
      unselectable="on"
      @dragend="dragend(element)"
      class="form-edit-widget-label droppable-element"
      :class="{ 'no-put': element.tpye === 'divider' }"
    >
      <a>
        <SvgIcon name="element.type" />
        <span>{{ element.label }}</span>
      </a>
    </li>
  </ul>
</template>

<script lang="ts">
  import { defineComponent, PropType, onMounted, reactive, onUnmounted  } from 'vue'
  import { SvgIcon } from '/@/components/Icon';
  import { WidgetForm } from '../config/antd';

  export default defineComponent({
    name: 'ComponentGroup',
    components: {
      SvgIcon,
    },
    props: {
      title: {
        type: String,
        required: true,
      },
      fields: {
        type: Array as PropType<Array<string>>,
        required: true,
      },
      list: {
        required: true,
      },
      widgetFormRef: {
        type: Object,
        required: true
      },
      widgetForm: {
        type: Object as PropType<WidgetForm>,
        required: true,
      },
    },
    setup(props) { 
      let mouseXY = reactive({"x": 0, "y": 0});
      let DragPos = reactive({"x": 0, "y": 0, "w": 1, "h": 1, "i": "0"});

      onMounted(() => {
        document.addEventListener("dragover", function (e) {
              mouseXY.x = e.clientX;
              mouseXY.y = e.clientY;
          }, false);
      });

      onUnmounted(() => {
      });
      const getparentRect = () =>{ 
        return props.widgetFormRef.$refs.content.getBoundingClientRect()
      }
      const dragend = (item) => {
        let parentRect = getparentRect();
        let mouseInGrid = false;
        if (((mouseXY.x > parentRect.left) && (mouseXY.x < parentRect.right)) && ((mouseXY.y > parentRect.top) && (mouseXY.y < parentRect.bottom))) {
            mouseInGrid = true;
        }
        if (mouseInGrid === true && (props.widgetForm.list.findIndex(item => item.i === 'drop')) === -1) {
          props.widgetFormRef.$refs.gridlayout.dragEvent('dragend', 'drop', DragPos.x, DragPos.y, 1, 1);
            let items = JSON.parse(JSON.stringify(item))
            if (
              item.type === 'radio' ||
              item.type === 'checkbox' ||
              item.type === 'select'
            ) {
              items = {
                ...items,
                options: {
                  ...items.options,
                  options: items.options.options.map((item: any) => ({
                    ...item,
                  })),
                },
              };
            }
            
            let computedx = (props.widgetForm.list.length ) % 4
            let returnedTarget = Object.assign(items,  {
              x: (props.widgetForm.list.length ) % 4,
              y: ((props.widgetForm.list.length - computedx) / 4 * 5), // puts it at the bottom
              w: 1,
              h: 2,
              i: item.key
            });
            debugger
            props.widgetForm.list.push(returnedTarget);
        }

      }
      
      return {
        getparentRect,
        dragend
      }
    },
  });
</script>
